<template>
	<div class="Shikuang">
		<template v-if='LiveDetail.length > 0'>
			<div class="main">
				<span class="end"></span>
				<ul class="live-ul">
					<li 
						v-for='(item,index) in LiveDetail'
						>
						<div :class="item.side==1?'left':'right'">
							<p class="time">{{ item.min }}<b>'</b></p>
							<p>{{ item.name }}</p>
							<template v-if='item.ac_type=="goal"'>
								<p class="red">进球</p>
								<img src="/static/img/goals.jpg" alt="" class="icon">
							</template>
							<!--罚牌-->
							<template v-else-if='item.ac_type=="card"'>
								<img :src="item.ac=='Red card'?'/static/img/red_card.jpg':'/static/img/yellow_card.jpg'" alt="" class="icon">
							</template>
							<!--换人-->
							<template v-else-if='item.ac_type=="subst_in"'>
								<p><span class="gyld">换下</span>{{ item.out_name }}</p>
								<img src="/static/img/change.jpg" alt="" class="icon">
							</template>
						</div>
					</li>
				</ul>
				<span class="start"></span>
			</div>
			
		</template>
		<div v-else class="noData">暂无实况内容！</div>
	</div>
</template>
<script>
export default {
	name: 'deatilShikuang',
	props:{
      LiveDetail:Array,
    },
	data: function(){
		return {
		}
	},
	methods:{
	
	}
};
</script>

<style lang="less" scoped>
	@import '~styles/varibles.less';
 	.main{
 		padding: .1rem 0 .4rem;
 	}
 	.end{
 		display: block;
 		margin: auto;
 		width: .4rem;
 		height: .4rem;
 		background: url(/static/img/end.png) center no-repeat;
 		background-size: 100% 100%;
 	}
 	.start{
 		display: block;
 		margin: auto;
 		width: .4rem;
 		height: .4rem;
 		background: url(/static/img/start.png) center no-repeat;
 		background-size: 100% 100%;
 	}
 	.red{
 		color: #f00;
 		font-size: .22rem;
 		line-height: 1;
 	}
 	.gyld{
 		color: rgb(153, 153, 153);
 		font-size: .22rem;
 		padding:0 .1rem;
 	}
	.live-ul{
		margin: .1rem 0;
		background: url(/static/img/ul_bg.jpg) center top repeat-y;
		padding: .2rem 0;
		li{
			margin:.4rem 0;
			position: relative;
			line-height: .6rem;
			font-weight: bold;
			color: #000;
		}
		.left{
			width: 50%;
			box-sizing: border-box;
			padding-right:1rem;
			margin-right: 50%;
			text-align: right;
			.icon{
				right: 50%;
				margin-right: -.3rem;
			}
			.time{
				right: 50%;
				margin-right: .3rem;
			}
		}
		.right{
			width: 50%;
			box-sizing: border-box;
			padding-left:1rem;
			margin-left: 50%;
			text-align: left;
			.icon{
				left: 50%;
				margin-left: -.3rem;
			}
			.time{
				left: 50%;
				margin-left: .3rem;
			}
		}
		.icon{
			position:absolute;
			width: .4rem;
			height: .4rem;
			border:.1rem #fff solid;
			top:0;
		}
		.time{
			position:absolute;
			line-height: .6rem;
			top:0;
		}
	}
</style>